<template>
  <LsTable
    class="table-list"
    :loading="tableConfig.loading"
    :data="tableConfig.data"
    :paging="tableConfig.paging"
    :config="tableConfig.config"
    @current-change="getDataList"
    @view="handleView"
    @handleselection="handleSelectData"
  >
    <template #slotName="{ row }">
      <div>我是 {{ row.aaaa }}</div>
    </template>
  </LsTable>
</template>
<script setup>
import { ref } from 'vue'
import { userServer } from '@/api/installServer'
// 表格的配置
const tableConfig = ref({
  config: [
    {
      type: 'selection',
      label: '全选'
    },
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    },
    {
      label: '电话',
      prop: 'phone'
    },
    {
      label: '生日',
      prop: 'birthday'
    },
    {
      label: '年龄',
      prop: 'age'
    },
    {
      label: '操作',
      type: 'button',
      width: '90px',
      buttons: [
        {
          name: '查看',
          event: 'view',
          link: true,
          type: 'primary'
        }
      ]
    }
  ],
  data: [],
  // 分页功能
  paging: {
    // 分页参数 没有分页可不传
    page: 1, // 当前页
    size: 10, // 页面大小
    total: 0, // 总条数
    pagerCount: 7, // 设置最大页码数 (大于等于 5 且小于等于 21 的奇数)
    autoSize: true // 设置根据屏幕高度自动改变每页显示行数
  },
  loading: false // 设置table加载中样式
})
// 查看
const handleView = (row) => {
  console.log('点击了查看')
}
// 选中数据
const selectData = ref([])
const handleSelectData = (e) => {
  console.log(e)
  selectData.value = e
}

const getDataList = () => {
  tableConfig.value.loading = true
  userServer.getUserList({}).then((res) => {
    console.log(res, 'res')
    tableConfig.value.loading = false
    if (res.code === 200) {
      tableConfig.value.data = res.data
      tableConfig.value.paging.total = res.data.total
    }
  })
}
</script>
<style scoped></style>
